<template>
	<view>
		<view class="my-resume-main">
			<view class="name-box">
				<view class="name">
					<view class="t1">{{detail.member.name}}<text></text></view>
					<view class="t2">{{detail.member.s_work_time}}年经验<text class="line">·</text>{{detail.member.birthday}}岁<text class="line">·</text>{{detail.member.education}}</view>
				</view>
				<image class="pull-right" :src="detail.member.portrait"></image>
			</view>
			<view class="name-box" style="margin-top: 20rpx;" @click="handleCallMe(detail.member.phone)">
				{{detail.member.phone}}
			</view>
			<view class="form-module">
				<view class="tit">个人技能</view>
				<view class="form-module-desc">
					<view class="skill-item" v-for="(item, index) in detail.member.skill" :key="index">{{item}}</view>
				</view>
			</view>
			<view class="form-module">
				<view class="tit">工作照</view>
				<view class="form-module-desc">
					<view :class="{'workPhoto-item': true, 'last': index == 2}" v-for="(item, index) in detail.member.work_img" :key="index"
					 @click="$imgPreview(item, index, host, detail.member.work_img)">
						<image mode="aspectFill" :src="`${host}/${item}`" :data-url="item"></image>
					</view>
				</view>
			</view>
			<view class="form-module" v-if="jobType == 1">
				<view class="tit">求职期望</view>
				<view class="joblist-main">
					<view class="joblist-box" v-for="(item, index) in detail.expect" :key="index">
						<view class="t1">{{item.position}}<text class="pull-right checked">{{item.salary || '面议'}}</text></view>
						<view class="t2">{{item.city || '地区不限'}}<text class="w32"></text>{{item.industry || '行业不限'}}</view>
					</view>
				</view>
			</view>
			<view class="form-module" wx:else>
				<view class="tit">兼职期望<text class="pull-right checked">{{detail.salary}}</text></view>
				<view class="joblist-main joblist-t1">
					{{detail.expectDesc}}
				</view>
				<view class="joblist-t2">{{detail.expectAddress}}<text class="line"></text>{{detail.expectIndustry}}</view>
			</view>
			<view class="form-module">
				<view class="tit">工作经历</view>
				<view class="work-main">
					<view class="work-box" v-for="(item, index) in detail.work" :key="index">
						<view class="t1">{{item.company_name}}<text class="time">{{item.s_serving}}-{{item.e_serving}}</text></view>
					</view>
				</view>
			</view>
			<view class="form-module">
				<view class="tit">自我评价</view>
				<view class="explored-box">
					{{detail.member.evaluate}}
				</view>
			</view>
		</view>
		<btnTpl @confirmEvent="nowMsgFn" v-if="detail.member.phone != timId">立即沟通</btnTpl>
	</view>
</template>

<script>
	import btnTpl from '../../components/recruit/btn-tpl.vue'
	import {
		getWorkResumeDtl
	} from '../../../apis/recruit/index.js'

	export default {
		data() {
			return {
				jobType: 2, //1全职 2兼职
				timId: '',
				detail: {}
			}
		},
		computed: {
			host() {
				return this.$baseHost.car
			}
		},
		onLoad(options) {
			console.log(options)
			this.jobType = options.type
			this.timId = uni.getStorageSync('openId')

			this.getInitDataInfo(options.id)
		},
		components: {
			btnTpl
		},
		methods: {
			handleCallMe(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber,
					success: () => {
						console.log("拨打电话成功！")
					},
					fail: () => {
						console.log("拨打电话失败！")
					}
				})
			},
			getInitDataInfo(member_id) {
				let _this = this;
				getWorkResumeDtl({
					member_id
				}).then(res => {
					if (res.code == 1) {
						res.data.work = res.data.work.map(item => {
							item.s_serving = item.s_serving.split(' ')[0]
							item.e_serving = item.e_serving.split(' ')[0]
							return item;
						})
						_this.detail = res.data
						_this.moreState = true
					}
				})
			},
			nowMsgFn(e) {
				let _this = this;
				uni.navigateTo({
					url: '/pages/recruit/chat-box/index?id=C2C' + _this.detail.member.phone,
				})
			},
			showImgFn(e) {
				let _this = this;
				uni.previewImage({
					current: e.currentTarget.dataset.url, // 当前显示图片的http链接
					urls: _this.detail.member.work_img // 需要预览的图片http链接列表
				})
			},
		}
	}
</script>

<style lang="less">
	.my-resume-main {
		padding: 40rpx 30rpx 0;
		color: #000;
	}

	.name-box {

		.name {
			display: inline-block;
			width: 560rpx;
			line-height: 60rpx;

			.t1 {
				font-size: 54rpx;
				line-height: 60rpx;
				margin-top: 14rpx;
			}

			.t2 {
				font-size: 24rpx;
				line-height: 24rpx;
				color: #6A6A6A;
				margin-top: 32rpx;
			}
		}

		image {
			width: 125rpx;
			height: 125rpx;
			border-radius: 50%;
		}

	}

	.line {
		display: inline-block;
		width: 24rpx;
		text-align: center;
	}

	.form-module {
		margin-top: 20rpx;
		border-top: 1rpx solid #e0e0e0;
		padding: 60rpx 0 20rpx;
	}

	.tit {
		font-size: 34rpx;
		font-weight: bold;
		line-height: 34rpx;

		.red {
			font-size: 28rpx;
		}

	}

	.form-module-desc {
		min-height: 40rpx;
		margin-top: 18rpx;
		overflow: hidden;
	}

	.skill-item {
		padding: 8rpx 26rpx;
		display: inline-block;
		margin: 15rpx 20rpx 0 0;
		background: #FFE7E5;
		border-radius: 5rpx;
		color: #E41805;
		font-size: 24rpx;
	}

	.workPhoto-item {
		margin: 14rpx 20rpx 0 0;
		width: calc(33.3vw - 35rpx);
		height: calc(33.3vw - 35rpx);
		display: inline-block;
		vertical-align: top;

		&.last {
			margin: 14rpx 0 0 0;
		}

		image {
			width: 100%;
			height: 100%;
		}
	}

	.joblist-main,
	.idle-main,
	.work-main,
	.explored-main {
		margin-top: 10rpx;
		overflow: hidden;
	}

	.joblist-main.joblist-t1 {
		font-size: 28rpx;
		margin-top: 28rpx;
		line-height: 36rpx;
	}

	.form-module {
		.joblist-t2 {
			color: #999;
			font-size: 24rpx;
			margin-top: 14rpx;
			line-height: 24rpx;
		}
	}

	.joblist-box,
	.idle-box,
	.work-box,
	.explored-box {
		margin-top: 20rpx;
		position: relative;
	}

	.joblist-box {
		.t1 {
			font-size: 28rpx;
			font-weight: bold;
			line-height: 28rpx;
		}

		.t2 {
			font-size: 24rpx;
			margin-top: 13rpx;
			line-height: 24rpx;
			color: #999;
		}
	}

	.iconZp-toright {
		font-size: 24rpx;
		color: #999;
		font-weight: 400;
	}

	.idle-box {
		.t1 {
			font-size: 24rpx;
			line-height: 24rpx;
			font-weight: bold;
		}
	}

	.work-box {
		.t1 {
			font-size: 28rpx;
			line-height: 28rpx;
			font-weight: bold;

			.time {
				font-size: 20rpx;
				line-height: 20rpx;
				font-weight: 400;
				color: #999;
				padding-left: 30rpx;
			}
		}
	}

	.explored-box {
		font-size: 24rpx;
	}
</style>
